<template>
  <div class="home-box flex">
    <div class="left-box flex flex-c">
      <div class="left-top">
        <div class="title">资料类型</div>
        <div class="title-bottom">
          <div
            :class="menuValue == 0 ? 'action' : ''"
            @click="optionClick(menuList[0], 0)"
          >
            全部数据
          </div>
          <div
            :class="menuValue == 1 ? 'qixiang action' : 'qixiang'"
            @click="optionClick(menuList[0], 1)"
          ></div>
          <!-- <div v-if="menuValue == 1" class="menu-c">
              <div v-for="(item, index) in menuListQX" :key="index" :class="index == 1 ? 'action' : ''" @click="menuClick(item, index)">
                    <span style="width: 50px; text-align: center; display: inline-block">{{  index + 1 }}</span>
                  {{ item.filename }}
              </div>
          </div> -->
          <div
            :class="menuValue == 2 ? 'cehui action' : 'cehui'"
            @click="optionClick(menuList[1], 2)"
          ></div>
          <!-- <div v-if="menuValue == 2" class="menu-c">
              <div v-for="(item, index) in menuListCH" :key="index" :class="menuValue == (index + 3) ? 'action' : ''" @click="menuClick(item, index)">
                    <span style="width: 50px; text-align: center; display: inline-block">{{  index + 1 }}</span>
                  {{ item.filename }}
              </div>
          </div> -->

          <!-- <div :class="menuValue == index + 1 ? 'menu-bottom action' : 'menu-bottom'" @click="optionClick(item, index + 1)" v-for="(item, index) in menuList" :key="index">
                <div class="qixiang"></div>
                <div class="cehui"></div>
          </div> -->
        </div>
      </div>
      <div class="flex flex-c left-bottom">
        <div class="title1"></div>
        <div class="left-table flex-1">
          <div v-for="(item, index) in leftTable" :key="index">
            <img
              v-if="index == 0"
              :src="img1"
              alt=""
              width="20px"
              style="margin: 0 10px;"
            />
            <img
              v-if="index == 1"
              :src="img2"
              alt=""
              width="20px"
              style="margin: 0 10px;"
            />
            <img
              v-if="index == 2"
              :src="img3"
              alt=""
              width="20px"
              style="margin: 0 10px;"
            />
            <span v-if="index > 2">{{ index + 1 }}</span>
            {{ item.filename }}
          </div>
        </div>
      </div>
    </div>

    <div class="right-box flex flex-c">
      <breadcrumbTag></breadcrumbTag>
      <div
        class="right-content flex flex-c flex-1"
        v-if="!dataCustomizedShow && routerName == 'home'"
      >
        <el-form ref="form" :model="params" :inline="true" size="small">
          <el-form-item label="数据类型">
            <el-select
              v-model="typeId"
              placeholder="请选择数据类型"
              @change="typeIdChange"
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in typeOption1"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择产品">
            <el-select
              v-model="product"
              placeholder="请选择产品"
              @change="productChange"
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in typeOption2"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据名称">
            <el-input
              v-model.trim="params.filename"
              placeholder="请输入数据名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="initData"
            ></el-button>
          </el-form-item>
        </el-form>

        <div class="flex-1" style="overflow-y: auto">
          <div
            v-for="(item, index) in tableData"
            :key="index"
            style="margin-bottom: 10px; border: 1px solid #ddd"
          >
            <div class="table-title">
              <span>
                <img
                  src="../../../public/image/icon.png"
                  alt=""
                  width="15px"
                  style="margin-right: 10px"
                />
                {{ item.filename }}</span
              >
              <el-button
                v-if="isadmin == 1"
                size="small"
                @click="dataCustomizedClick(item)"
                >数据定制</el-button
              >
            </div>
            <div class="table-list flex">
              <!-- <div v-if="item.filename == '正射影像图'">
                <img :src="ZSYXT" alt="" width="200px" />
              </div>
              <div v-if="item.filename == '联合作战图'">
                <img :src="LHZZT" alt="" width="200px" />
              </div>
              <div v-if="item.filename == '数字高程模型'">
                <img :src="GCSZMX" alt="" width="200px" />
              </div> -->
              <div style="width: 220px;">
                <img  :src="imgFn(item.img)"  alt=""  style="width: 100%; height: 100%;"  />
              </div>
              <div class="table-content">
                <div
                  class="table-tr flex"
                  v-for="(citem, cindex) in Object.keys(item.filedetails)"
                  :key="cindex + 'tr'"
                >
                  <div>{{ citem }}</div>
                  <div>{{ item.filedetails[citem] }}</div>
                </div>
                <!-- <div class="table-tr flex" v-if="item.keyword">
                  <div>关键字</div>
                  <div>{{ item.keyword }}</div>
                </div>
                <div class="table-tr flex" v-if="item.rate">
                  <div>更新频率</div>
                  <div>{{ item.rate }}</div>
                </div>
                <div class="table-tr flex" v-if="item.number">
                  <div>数据量</div>
                  <div>{{ item.number }}</div>
                </div>
                <div class="table-tr flex" v-if="item.receiveTime">
                  <div>起止时间</div>
                  <div>{{ $changeTime.createTimeFn("", "", item.receiveTime) }}</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <ComPagination
          :total="total"
          :currentPage="params.pageNum"
          :pageSize="params.pageSize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></ComPagination>
      </div>
    </div>
  </div>
</template>

<script>
import ComPagination from "@/components/comPagination.vue";
import breadcrumbTag from "@/components/breadcrumbTag.vue";
// import { mapState } from 'vuex'
import axios from "axios";
// import dataList from "@/views/home/dataList";

export default {
  name: "home",
  components: {
    ComPagination,
    breadcrumbTag,
  },
  data() {
    return {
      typeId: "",
      product: "",
      params: {
        typeId: null,
        filename: "",
        pageNum: 1,
        pageSize: 10,
      },
      menuList: [],
      menuValue: 0,
      dataCustomizedShow: false,
      iframeStatus: true,
      isCollapse: false,
      isadmin: "2",
      img1: require("../../../public/image/1.png"),
      img2: require("../../../public/image/2.png"),
      img3: require("../../../public/image/3.png"),
      ditu1: require("../../../public/image/全国地图.png"),
      // ditu2: require("../../../public/image/气象-实况-卫星.png"),
      // ditu3: require("../../../public/image/气象-实况-雷达.png"),
      // ditu5: require("../../../public/image/气象-预报-全球数值预报.png"),
      LHZZT: require("../../../public/image/LHZZT.png"),
      ZSYXT: require("../../../public/image/ZSYXT.png"),
      GCSZMX: require("../../../public/image/_GC.png"),
      tableData: [],
      total: 0,
      typeOption1: [],
      typeOption2: [],
      leftTable: [],
      menuListQX: [
        { filename: "地面实况观测" },
        { filename: "全国高空观测" },
        { filename: "全球数值模式" },
        { filename: "全球卫星云图" },
        { filename: "全国雷达拼图" },
        { filename: "智能网格预报" },
        { filename: "全球城市预报" },
        { filename: "海洋实况观测" },
        { filename: "海洋数值模式" },
        { filename: "全国河道水库水情" },
      ],
      menuListCH: [
        { filename: "1:100万全球联合作战图" },
        { filename: "全球DEM数值高程模型" },
        { filename: "重点城市倾斜摄影模型" },
        { filename: "1:100万航空地图" },
        { filename: "1:5万地形数据" },
        { filename: "某地图街景地图" },
      ],
      // dataView:{
      // 	filedetails: '',
      // 	keyword: '',
      // 	rate: '',
      // 	number: '',
      // 	receiveTime: '',
      // },
      routerName: "home",
      // fileListInif:{
      // 	'定制范围': [],
      // 	'要素列表': [],
      // 	'订阅数据时间': [],
      // },
      // customizedParams: {
      // 	elementType: [],
      // 	jsonDate: '',
      // 	account: '',
      // 	password: '',
      // 	protno: '',
      // 	url: '',
      // 	ipaddr: '',
      // 	filename: '',
      // 	endtime: '',
      // 	crearetime: '',
      // },
    };
  },
  watch: {
    $route(to, from) {
      this.routerName = to.name;
      // this.initData()
    },
  },
  mounted() {
    this.routerName = this.$route.name;
    this.isadmin = sessionStorage.getItem("isadmin");
    this.initthecharts();
    this.initOption(0, 0);
    this.initData();
  },
  methods: {
    imgFn(name){
      try {
        return require(`../../../public/image/${name}.png`)
      } catch (error) {
        return this.ditu1
      }
    },
    initOption(val, pid) {
      
      this.$http
        .post(`/fileType/list?id=${val}`)
        .then((res) => {
          if (res.code == 200) {
            if (pid == 0) {
              this.menuList = res.data || [];
              this.initOption(this.menuList[0].id, 1);
            }
            if (pid == 1) {
              this.typeOption1 = res.data || [];
            }
            if (pid == 2) {
              this.typeOption2 = res.data || [];
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      // this.menuList  = require("@/assets/json/tablelist.json")
    },
    initData() {
      this.$http
        .post(`/fileList/list`, this.params)
        .then((res) => {
          this.tableLoading = false;
          if (res.code == 200) {
            let data = res.data.records || [];
            data.forEach((item) => {
              item.filedetails = JSON.parse(item.filedetails);
            });
            this.tableData = data;
            this.total = res.data.total || 0;
            // console.log(this.tableData, 'tableData');
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      // pagesize 全部数据
      let params = { ...this.params };
      params.pageSize = 10000;
      this.$http
        .post(`/fileList/list`, params)
        .then((res) => {
          this.tableLoading = false;
          if (res.code == 200) {
            let data = res.data.records || [];
            data.forEach((item) => {
              item.filedetails = JSON.parse(item.filedetails);
            });
            localStorage.setItem("allData", JSON.stringify(data));
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      // this.tableData  = require("@/assets/json/home.json")
    },
    initthecharts() {
      this.$http
        .post(`/fileList/thecharts`)
        .then((res) => {
          this.tableLoading = false;
          if (res.code == 200) {
            this.leftTable = res.data.records || [];
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      // this.leftTable  = require("@/assets/json/home.json")
    },
    optionClick(row, index) {
      // console.log('点击了')
      this.typeId = "";
      this.product = "";
      this.menuValue = index;
      if (row) {
        this.params.typeId = row.id;
        this.initOption(row.id, 1);
        this.params.pageNum = 1;
        this.initData();
        return;
      } else {
        this.typeOption1 = [];
        this.typeOption2 = [];
        this.params.typeId = null;
        this.initData();
      }
    },
    dataCustomizedClick(row) {
      localStorage.setItem('menuIndex', row.id)
      this.$store.commit("setMenuItem", row);
      this.$store.commit("SetMenu", {
        menuname: "数据定制",
        url: `/myCustomization`,
      });
      // this.$router.push(`/myCustomization?id=${row.id}`);
      this.$router.push(`/myCustomization`);
      // this.dataCustomizedShow = true
      // this.dataView = row
    },
    typeIdChange(val) {
      this.product = "";
      this.params.typeId = val;
      this.initOption(val, 2);
      this.params.pageNum = 1;
      this.initData();
    },
    productChange(val) {
      this.params.typeId = val;
      this.params.pageNum = 1;
      this.initData();
    },
    handleCurrentChange(page) {
      this.params.pageNum = page;
      this.initData();
    },
    handleSizeChange(size) {
      this.params.pageSize = size;
      this.initData();
    },
  },
};
</script>
<style lang="scss" scoped>
.home-box {
  height: 100%;
  // padding: 20px;
  // background-color: #e5effd;
}
.left-box {
  width: 300px;
  height: 100%;
  // background-color: #fff;
  .left-top {
    margin-top: 15px;
    // height: 320px;
    padding-bottom: 10px;
    // background-image: url(../../../public/image/left-top.png);
    // background-size: 100% 100%;
    border: 1px solid #308ce9;
    background-color: #fff;
  }
  .left-bottom {
    margin-top: 10px;
    overflow: hidden;
    border: 2px solid;
    border-image: radial-gradient(circle, #308ce9, #ffffff) 1 1;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 20px;
    background-image: url(../../../public/image/leftHead.png);
    background-size: 100% 100%;
    // background-image: linear-gradient(to right, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
  }
  .title1 {
    height: 70px;
    background-image: url(../../../public/image/image1.png);
    background-size: 100% 100%;
  }
  .title-bottom {
    padding: 10px;
    font-size: 18px;
    color: #070607;
    > div:nth-child(1) {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      // background-color: #E5EFFD;
      // border: 1px solid #fff;
      background-image: url(../../../public/image/quanbu.png);
      background-size: 100% 100%;
      &.action {
        color: #fff;
        text-shadow: 2px 3px 2px rgba(50, 77, 131, 0.53);
        // border: 1px solid #409EFF;
        background-image: url(../../../public/image/quanbu1.png);
        background-size: 100% 100%;
      }
    }
    .qixiang {
      height: 100px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-image: url(../../../public/image/weather.png);
      background-size: 100% 100%;
    }
    .qixiang.action {
      background-image: url(../../../public/image/weather1.png);
      background-size: 100% 100%;
    }
    .cehui {
      height: 100px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-image: url(../../../public/image/survey.png);
      background-size: 100% 100%;
    }
    .cehui.action {
      background-image: url(../../../public/image/survey1.png);
      background-size: 100% 100%;
    }
    .menu-c {
      > div {
        font-size: 14px;
        color: #070607;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        border-bottom: 1px solid #e5effd;
      }
      div:nth-child(2n) {
        background-color: #f2f6fc;
      }
      // div.action{
      //   color: #ffffff;
      //   background: linear-gradient(153deg, #F59025, #F7A912);
      //   text-shadow: 2px 3px 2px rgba(148,82,12,0.53);
      // }
    }
    // > div:nth-child(2) {
    //   height: 100px;
    //   background-image: url(../../../public/image/weather.png);
    //   background-size: 100% 100%;
    //   &.action {
    //     background-image: url(../../../public/image/weather1.png);
    //     background-size: 100% 100%;
    //   }
    // }
    // > div:nth-child(3) {
    //   height: 100px;
    //   background-image: url(../../../public/image/survey.png);
    //   background-size: 100% 100%;
    //   &.action {
    //     background-image: url(../../../public/image/survey1.png);
    //     background-size: 100% 100%;
    //   }
    // }
  }
  .menu-bottom {
    padding: 10px;
    // border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    margin-top: 10px;
    // align-items: center;
    cursor: pointer;
    // .qixiang{
    //   height: 100px;
    //   background-image: url(../../../public/image/weather.png);
    //   background-size: 100% 100%;
    //   &.action {
    //     background-image: url(../../../public/image/weather1.png);
    //     background-size: 100% 100%;
    //   }
    // }
    // .cehui{
    //   height: 100px;
    //   background-image: url(../../../public/image/survey.png);
    //   background-size: 100% 100%;
    //   &.action {
    //     background-image: url(../../../public/image/survey1.png);
    //     background-size: 100% 100%;
    //   }
    // }
    // > div:nth-child(2) {
    //   font-size: 12px;
    //   color: #909399;
    //   margin-top: 10px;
    // }
  }
  .left-table {
    font-size: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    span {
      display: inline-block;
      width: 40px;
      text-align: center;
    }
    > div {
      padding: 10px;
      color: #555555;
      display: flex;
      align-items: center;
    }
    > div:nth-child(2n) {
      background-color: #f6f8fa;
    }
    > div:nth-child(1) {
      background-color: rgba(#f3bc51, 0.2);
    }
    > div:nth-child(2) {
      background-color: rgba(#93b5e0, 0.2);
    }
    > div:nth-child(3) {
      background-color: rgba(#f1c5ab, 0.2);
    }
  }
}
.right-box {
  flex: 1;
  margin-left: 20px;
  // background-color: #fff;
  padding: 5px;
  display: flex;
  flex-direction: column;
  // border: 1px solid #000;
  .right-content {
    padding: 20px 20px 0 20px;
    flex: 1;
    background-color: #fff;
    border: 1px solid #308ce9;
    position: relative;
    // background-image: url(../../../public/image/border.png);
    // background-size: 100% 100%;
    // overflow: hidden;
    // overflow-y: auto;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 15px;
      background-image: url(../../../public/image/jiao.png);
      background-size: 100% 100%;
      transform: rotate(180deg);
    }
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 15px;
      background-image: url(../../../public/image/jiao.png);
      background-size: 100% 100%;
    }
  }
}
:deep .el-table th.el-table__cell {
  background-color: #f5f7fa;
}

// table的样式
.table-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  height: 40px;
  padding: 0 8px 0 10px;
  // background-color: #f2f6fc;
  color: #333333;
  background-image: url(../../../public/image/title-bg.png);
  background-size: 100% 100%;
  > span {
    display: flex;
    align-items: center;
  }
  .el-button {
    border-color: #308ce9;
    color: #308ce9;
  }
}
.table-list > div:nth-child(1) {
  padding: 10px;
}
.table-list,
.data-list {
  font-size: 14px;
  display: flex;
  color: #333333;
  .table-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-tr {
      flex: 1;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      border-top: 1px solid #ddd;
      div:nth-child(1) {
        width: 100px;
        padding: 8px 10px;
        // min-height: 160px;
        // background-color: #eee;
        background: linear-gradient(-73deg, #dbe8f8, #f3f8fc);
        // background-image: linear-gradient(to left, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
        display: flex;
        align-items: center;
        border-right: 1px solid #ddd;
      }
      div:nth-child(2) {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 3px 10px;
      }
    }
  }
}
.data-customized {
  // flex: 1;
  // overflow-y: auto;
  // .title{
  // 	font-size: 16px;
  // 	padding: 10px;
  // 	font-weight: bold;
  // 	background-color: #f2f6fc;

  // }
  // .data-list{
  // 	border: 2px solid #308CE9;
  // 	>div:nth-child(1){
  // 		padding: 0;
  // 	}
  // 	.customized-top-right{
  // 		width: 300px;
  // 		display: flex;
  // 		flex-direction: column;
  // 		>div{
  // 			flex: 1;
  // 			color: #308CE9;
  // 			display: flex;
  // 			flex-direction: column;
  // 		}
  // 		.title{
  // 			padding: 10px;
  // 			text-align: center;
  // 			border-bottom: #308CE9 2px solid;
  // 			border-left: 2px solid #308CE9;

  // 		}
  // 		.content{
  // 			flex: 1;
  // 			display: flex;
  // 			justify-content: center;
  // 			align-items: center;
  // 			border-left: 2px solid #308CE9;

  // 		}
  // 		>div:nth-child(2){
  // 			margin-top: 10px;
  // 			border-top: #308CE9 2px solid;
  // 		}
  // 	}
  // }
  // .map{
  // 	width: 500px;
  // 	height: 300px;
  // 	position: relative;
  // 	.full-screen{
  // 		position: absolute;
  // 		right: 10px;
  // 		top: 10px;
  // 		font-size: 30px;
  // 		z-index: 9;
  // 	}
  // 	iframe{
  // 		zoom: 0.3;
  // 	}
  // }
  // // .iframeFalse{
  // // 		width: 100%;
  // // 		height: 100%;
  // // 	}
  // .iframeTrue{
  // 	margin: 0;
  // 	padding: 0;
  // 	border: 0;
  // 	position: fixed;
  // 	top: 0;
  // 	left: 0;
  // 	width: 100%;
  // 	height: 100%;
  // 	z-index: 200;
  // 	iframe{
  // 		zoom: 1;
  // 	}
  // }
  // .data-form{
  // 	:deep .el-form-item__content{
  // 		flex: 1;
  // 	}
  // }
}
</style>
